<template>
  <div>
    <div>
      <el-row v-for="(item,index) in configSpecs" style="background:#eee;padding:20px">
        <el-col v-for="(itemSub,indexSub) in item" :span="6">
          <el-card :bordered="false" style="width:220px">
            <div slot="header" class="clearfix">
              <span>{{ itemSub.name }}</span>
              <el-button v-has="30601" style="float: right; padding: 3px 0" type="text" @click.prevent="add(itemSub)">配置</el-button>
            </div>
            <div style="text-align:center" v-for="(itemSubSub,indexSubSub) in itemSub.existedValues">
              <div class="clearfix">
                <span>{{ itemSubSub.shortName }}</span>
                <el-button v-has="30602" style="float: right; padding: 3px 0" type="text" @click.prevent="detail(itemSubSub)">编辑</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-dialog :visible.sync="openModal" :title="drawerTitle" width="50%" top="0">
        <el-form>
          <el-form-item label="配置简称" label-position="top" required>
            <el-input v-model="shortName" placeholder="配置简称" />
          </el-form-item>
          <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value" />
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      id: '',
      providerConfigId: '',
      shortName: '默认配置',
      // 实例对象
      fApi: {},
      // 表单数据
      value: {},
      // 表单生成规则
      rule: [],
      option: {},
      openModal: false,
      configSpecMap: new Map(),
      configSpecs: [],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formDataDefault: {
        fbaCode: '',
        contacter: 'Amazon',
        phone: '9999999999',
        countryCode: '',
        state: '',
        city: '',
        address: '',
        address2: '',
        company: '',
        zipCode: ''
      },
      formData: {
        id: '',
        fbaCode: '',
        contacter: 'Amazon',
        phone: '9999999999',
        countryCode: '',
        state: '',
        city: '',
        address: '',
        address2: '',
        company: '',
        zipCode: ''
      },
      queryData: {
        pageSize: 50,
        currentPage: 0
      },
      pageTotal: 0,
      pageSizeOpts: [50, 100],
      drawerTitle: '配置'
    }
  },
  created() {
    this.list()
    const _this = this
    this.option = {
      // 表单提交事件
      onSubmit: function(formData) {
        _this.submit()
      }
    }
  },
  mounted() {
  },
  methods: {
    list() {
      const _this = this
      request({
        url: 'channel-provider/config-spec',
        method: 'get'
      }).then(res => {
        if (res.success) {
          res.data.forEach(s => _this.configSpecMap.set(s.id, s))
          _this.configSpecs = _this.chunk(res.data, 4)
        }
      })
    },
    chunk(arr, size) {
      var rsArr = []
      for (var i = 0; i < arr.length; i += size) {
        var tempArr = []
        for (var j = 0; j < size && i + j < arr.length; j++) {
          tempArr.push(arr[i + j])
        }
        rsArr.push(tempArr)
      }
      return rsArr
    },
    submit() {
      request({
        url: 'channel-provider/config-spec?id=' + this.id + '&shortName=' + this.shortName + '&providerConfigId=' + this.providerConfigId,
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        data: JSON.stringify(this.value)
      }).then(res => {
        if (res.success) {
          this.openModal = false
          this.list()
        }
      })
    },
    detail(row) {
      this.rule = row.rules
      this.shortName = row.shortName
      this.providerConfigId = row.providerConfigId
      this.openModal = true
    },
    add(row) {
      const spec = this.configSpecMap.get(row.id)
      this.rule = spec.rules
      this.id = row.id
      this.shortName = '默认配置'
      this.openModal = true
    }
  }
}
</script>
<style>
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
</style>
